<template>
	<view>
		<view v-show="types" class="page1">
			<u-row gutter="16">
				<u-col span="4">
					<view class="nav1">车队：</view>
				</u-col>
				<u-col span="8">
					<view  class="nav1">{{uinfo.cdname}}</view>
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="8">
					<view class="nav1">当班预约：</view>
				</u-col>
				<u-col span="4">
					<view class="nav1"><u-button type="primary" @click="yuy">预约</u-button></view>
				</u-col>
			</u-row>
			<u-row gutter="12" class="item3">
				<u-col span="4" text-align="center" >
					<view>委托单号</view>
				</u-col>
				<u-col span="4" text-align="center" >
					<view>货主</view>
				</u-col>
				<u-col span="4" text-align="center" >
					<view>预约类型</view>
				</u-col>
			</u-row>
			
			
			<u-row gutter="12" v-for="(item,index) in dqbcyuy" class="item4" :key="index" @click="addxz(item)" :class="{'itvs':cur2==item.id}">
				<u-col span="4" text-align="center" >
					<view>{{item.orderons}}</view>
				</u-col>
				<u-col span="4" text-align="center" >
					<view style="line-height: 20px;">{{item.hzdwid}}</view>
				</u-col>
				<u-col span="4" text-align="center" >
					<view>{{item.rytype==1?item.bdsj:'有任务'}}</view>
				</u-col>
			</u-row>
			
			<u-row gutter="16" class="item2">
				<u-col span="6">
					<view class="demo-layout bg-purple">下个班次预约</view>
				</u-col>
			</u-row>
			
			<u-row gutter="12" class="item3">
				<u-col span="4" text-align="center" >
					<view>委托单号</view>
				</u-col>
				<u-col span="4" text-align="center" >
					<view>货主</view>
				</u-col>
				<u-col span="4" text-align="center" >
					<view>预约类型</view>
				</u-col>
			</u-row>
			
			<u-row gutter="12" v-for="(item,index) in dqbcyuytow" class="item4" :key="index" >
				<u-col span="4" text-align="center" >
					<view>{{item.orderons}}</view>
				</u-col>
				<u-col span="4" text-align="center" >
					<view style="line-height: 20px;">{{item.hzdwid}}</view>
				</u-col>
				<u-col span="4" text-align="center" >
					<view>{{item.rytype==1?item.bdsj:'有任务'}}</view>
				</u-col>
			</u-row>
		</view>
		
		<u-popup :show="sjyuy1" bgColor="#ffffff" :safeAreaInsetBottom="true" @close="sjyuy1=false" @open="sjyuy1=true" :closeable="true" :overlay="false" mode="center">
			<view class="navopen">
				<view class="qx">
					<view class="qxtext">车牌查询</view>
				</view>
				<u-row gutter="16" style="margin-top: 20px;">
					<u-col span="4" text-align="center" >
						<view class="navlistitem1">车牌:</view>
					</u-col>
					<u-col span="4" text-align="center" >
						<view><u--input placeholder="请输入内容" border="bottom" clearable v-model="cpnames"></u--input></view>
					</u-col>
					<u-col span="4" text-align="center" >
						<view class="seach" @click="seachcp">查询</view>
					</u-col>
				</u-row>
				<view style="overflow: auto;height: 200px;margin-bottom: 20px;margin-top: 20px;">
					<view class="listv" :class="{'itv':cur1==item.id,'itv2':item.blackname==2}" @click="xzcps(item)" v-for="(item, index) in items4" :key="item.id" >{{item.char1}}</view>
				</view>
				<u-button type="primary"  @click="wcbangding" text="完成预约"></u-button>
			</view>
		</u-popup>
		
		<u-modal :show="show" width="320px"  :zoom="true" title="预约须知"  @confirm="confirm" >
			<view class="custom-modal">
					<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	 </view>
</template>
<script>
	export default {
		name: "sjyuy",
		props: {
			types: {
				type: Boolean,
				default: false,
				required: true
			},
			uid:{
				type: Number
			}
		},
		data() {
			return {
				uinfo: '',
				dqbcyuytow: [],
				dqbcyuy: [],
				yuydata: '',
				show:false,
				sjyuy1: false,
				cp: '',
				cpid: '',
				items4: [],
				current: '',
				cpnames: '',
				cur1:'',
				xzinfo:'',
				cur2:'',
				content:'1、车辆进出码头作业区需至安全管理部办理《码头车辆通行证》，凭证出入。人员进出码头作业区需在门岗处进行登记备案，经许可后进入。2、酒醉人员禁止进入港区。3、码头作业区内严禁吸烟，违者处罚2000元。4、装运施工工程用料、废料、工具、设备的运输车辆，凭《工程设备材料出(入)港表》进出。5、装载危险化学品的作业车辆（含外来加油车），由安全管理部核查、备案相关证件后办理《临时码头车辆通行证》进港。6、未经批准，任何单位、个人不得挖掘主干道路或在主干道路上堆放货物、装卸作业、停放车辆和进行其他妨碍交通安全的活动。7、禁止酒后驾驶车辆以及三轮车进入码头作业区。8、禁止货车车厢违规载人、客货两用车后斗载人或人货混装。9、车辆载运易燃易爆或其他危险货物进出码头作业区，必须持有公安机关核发的准运证或有关主管部门核发的营运证，车上须按《道路运输危险货物车辆标志》要求设置“危险品”字样的标志灯牌。指派专人押车，按指定的时间、路线行驶。10、码头作业区内，支干道的车辆进入主干道前，必须在支干道路口减速让行线观察路口情况，确认安全后方可驶入主干道。11、码头作业区内，自卸车在堆场卸货后必须将车斗完全落下方可驶离堆场，进入道路行驶。12、码头前沿禁止非作业车辆进入，装载修理材料、工具车辆和执行任务的特种车辆、船舶物品专供车辆等除外。13、限速规定：1）一、三期码头主干道、支干道时速15km/h；2）二期码头主干道30km/h、支干道时速20km/h；3）码头前沿及集装箱堆场时速15km/h；       4）码头作业区门岗、地中衡、仓库、十字路口、交叉路口、货场通道、堆场出入口时速5km/h。14、外来车辆要主动避让港内作业车辆，一切车辆在装卸作业地应避让正在装卸作业的港内装卸机械。15、车辆必须自觉停放在停车栅、划定的停车位或指定处所。16、车辆不得进入码头轨道内停放，人员进入临水1.5米内须穿救生衣。17、集装箱作业区域实行封闭管理，严禁无关人员、车辆进入。自行车、摩托车、电动车等不得进入集装箱作业区。',
			};
		},
		created() {
			this.getuserinfo();
		},
		methods: {
			confirm() {
					this.show = false;
			},
			addxz(e){
				this.cur2 = e.id
				this.yuydata = e
			},
			xzcps(e){
				if(e.blackname==2){
					uni.showToast({
						title: '当前车牌是黑名单',
						icon: "none",
						duration: 2000
					});
					return false;
				}else{
					this.cur1 = e.id
					this.cpid = e.id
					this.cp = e.char1
				}
			},
			
			yuy(){
				console.log('打开')
				this.show = true
				this.sjyuy1 = true
			},
			// qxcp() {
			// 	this.sjyuy1 = false
			// },
		
	
			async seachcp() {
				let cpnames = this.cpnames
				let data = {
					cdid: this.uinfo.cdid,
					cpnames: cpnames
				}
				let res = await this.$api.getcpcdlist(data)
				if (res.data.code == 0) {
					this.items4 = res.data.data
				}
			},
			async wcbangding() {
				let yuydata = this.yuydata
				if(yuydata==''){
					uni.showToast({
						title: '请选中数据后在操作',
						icon: "none",
						duration: 2000
					});
					return false;
				}
				if(this.cpid==''){
					uni.showToast({
						title: '请选车牌后在操作',
						icon: "none",
						duration: 2000
					});
					return false;
				}
				
				let data = {
					yid: yuydata.id,
					uid: uni.getStorageSync('uid'),
					cdid: this.uinfo.cdid,
					hzsqid: yuydata.hzsqid,
					cp: this.cp,
					cpid: this.cpid,
					banci: yuydata.datetime
				}

				let res = await this.$api.bangding(data)
				console.log(res.data)
				if (res.data.code == 0) {
					//log
					let data1 = {
						uid:uni.getStorageSync('uid'),
						msg:this.uinfo.cname+'接受委托单号'+yuydata.orderons+'的任务',
						lv:1,
						type:1,
						cz:JSON.stringify(data)
					}	
					await this.$api.addlogs(data1)
					this.sjyuy1 = false
					this.getsjlistsqorderon();
					uni.navigateTo({
						url:"/pages/shoquan/sjckyuylist"
					});
				} else {
					this.$refs.uNotify.show({
						type: 'primary',
						message: res.data.msg,
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop:true
					})
					return false
				}
			},
			//绑定预约
			async bangding(e) {
				let data = {
					uid: uni.getStorageSync('uid'),
				}
				console.log(e);
				this.sjyuy1 = true
				this.yuydata = e
			},
			async getcpcdlist() {
				let data = {
					cdid: this.uinfo.cdid
				}
				let res = await this.$api.getcpcdlist(data)
				if (res.data.code == 0) {
					this.items4 = res.data.data
				}
			},
			async getuserinfo() {
				let data = {
					id: this.uid
				}
				let res = await this.$api.getuserinfo(data)
				if (res.data.code == 0) {
					this.uinfo = res.data.data
					uni.setStorageSync('uid', res.data.data.id);
					uni.setStorageSync('cdtype', res.data.data.cdtype);
					if(res.data.data.cdtype==1){
						this.getsjlistsqorderon();
						this.getsjlistsqorderontow();
						this.getcpcdlist();
					}
				}
			},
			async getcaropnedel(){
				let data = {
						uid: uni.getStorageSync('uid')
					}
				let res = await this.$api.getcaropnedel(data)
			},
			async getsjlistsqorderon() {
				let data = {
					uid: uni.getStorageSync('uid')
				}
				let res = await this.$api.getsjlistsqorderon(data)
				if (res.data.code == 0) {
					this.dqbcyuy = res.data.data
				}
			},
			async getsjlistsqorderontow() {
				let data = {
					uid: uni.getStorageSync('uid')
				}
				let res = await this.$api.getsjlistsqorderontow(data)
				if (res.data.code == 0) {
					this.dqbcyuytow = res.data.data
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page1 {
		padding: 10px;
		display: block;
	}
	/* 设置模态对话框的高度 */
	.custom-modal {
	  max-height: 400rpx; /* 设置最大高度 */
	  overflow-y: auto; /* 内容超出时可滚动 */
	}
	.navsj {
		// float: left;
		// width: 33%;
		// text-align: center;
		// height: 60px;
		// line-height: 60px;
		// font-size: 20px;
	}

	.nav1 {
		// font-size: 40upx;
		// height: 60upx;
		// line-height: 60upx;
		color: #3c77b7;
	}

	.item2 {
		font-size: 40upx;
		color: #3f3e41;
		height: 70upx;
		line-height: 70upx;
		font-weight: 600;
		margin-top: 10px;
		margin-bottom: 10px;
		color: #3c77b7;
	}

	.item3 {
		background-color: #3c77b7;
		margin-top: 20px;
		color: #ffffff;
		// overflow: hidden;
		height: 40px;
		// line-height: 60px;
	}

	.item4 {
		border: 1px solid #3c77b7;
		overflow: hidden;
		height: 60px;
		line-height: 60px;
	}

	.navopen {
		background-color: #ffffff;
		width:400px;
		margin-top: 5px;
	}
	.qx {
		background-color: #3c77b7;
		color: #eaeaea;
		font-size: 40upx;
		height: 40px;
		line-height: 40px;
	}

	.navlist {
		padding: 10px;
		// margin-bottom: 10px;
		overflow: hidden;
		height: 60px;
	}

	.navlistitem1 {
		// float: left;
		font-size: 35upx;
		height: 30upx;

		// line-height: 30upx;
		font-weight: 600;
		color: #3c77b7;
	}

	.navlistitem2 {
		float: left;
		font-size: 35upx;
		height: 60px;
		margin-left: 20upx;
		// line-height: 30upx;
		// font-weight: 600;
		// color: #3c77b7;
	}

	.wcbd {
		text-align: center;
		height: 120upx;
		line-height: 120upx;
		background-color: #3c77b7;
		font-size: 50upx;
		font-weight: 600;
		color: #ffffff;
	}

	.qxtext {
		text-align: right;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		width: 60%;
		float: left;
	}

	.items2 {
		color: #3c77b7;
		font-size: 20px;
		float: left;
		width: 50%;
		height: 60px;
		line-height: 60px;
	}

	.items1 {
		background-color: #3c77b7;
		color: #ffffff;
		font-size: 20px;
		width: 50%;
		height: 60px;
		line-height: 60px;
		text-align: center;
		float: left;
		border-radius: 10px;
	}
	.itv2{
		background-color: #000102;
		color: #ffffff;
	}
	.but1{
		float: left;
		margin-left: 20upx;
		height:50px;
		border-bottom: 3px solid #4993dd;
		font-weight: 600;
		width: 300upx;
		line-height: 50px;
		color: #4993dd;
	}
	.seach{
		// float: left;
		height: 40px;
		width: 100px;
		color: #ffffff;
		border-radius: 5px;
		font-size: 20px;
		// margin-left: 10px;
		line-height: 40px;
		text-align: center;
		background-color: #4993dd;
	}
	.listv{
		height: 50px;
		width: 80%;
		border: 3px solid #4993dd;
		text-align: center;
		line-height: 50px;
		margin: 0 auto;
		margin-top: 5px;
		border-radius: 10px;
		font-size: 18px;
		color: #4993dd;
	
	}
	.itv{
		background-color: #4993dd;
		color: #ffffff;
	}
	.itvs{
		background-color: #4993dd;
		color: #ffffff;
	}
	.itv2{
		background-color: #000102;
		color: #ffffff;
	}
</style>
